<script lang="ts" setup>
// typescript
interface IProps {
  /**
   * asc 升序
   * desc降序
   */
  sort?: string
}
const props = withDefaults(defineProps<IProps>(), {
  sort: ''
});
</script>

<!-- 排序图标 -->
<template>
  <view class="w-components-container w-slot-icon">
    <view class="iconfont" :class="{ actived: sort == 'asc' }">&#xe67f;</view>
    <view class="iconfont" :class="{ actived: sort == 'desc' }">&#xe680;</view>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-slot-icon {
  display: inline;

  view {
    font-size: 20rpx;
    color: $text-color;
    position: relative;

    &.actived {
      color: $primary-color;
    }

    &:first-child {
      top: 4rpx;
    }

    &:last-child {
      top: -2rpx;
    }
  }
}
</style>